<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <el-card>
            <el-button type="primary" @click="add">添加</el-button>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row v-for="item in scope.row.children" :key="item.id" class="oneRow oneRows" type="flex"
                            align="middle">
                            <el-col :span="6" :push="n">
                                <el-tag closable @close="close(scope.row.id, item.id)">{{ item.authName }}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <el-row v-for="it in item.children" :key="it.id" class="oneRow twoRows" type="flex"
                                    align="middle">
                                    <el-col :span="6">
                                        <el-tag type="success" closable @close="close(scope.row.id, it.id)">
                                            {{ it.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-tag v-for="t in it.children" :key="t.id" class="tagBox" type="warning"
                                            @close="close(scope.row.id, t.id)" closable>{{ t.authName }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称">
                </el-table-column>
                <el-table-column prop="roleDesc" label="角色描述">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="300px">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRoles(scope.row.id)">编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRoles(scope.row.id)">
                            删除
                        </el-button>
                        <el-button type="warning" icon="el-icon-star-off" size="mini" @click="poRoles(scope.row.id)">分配权限
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <addEdit :options="options" :rolesFrom="rolesFrom" @getRolesList="getRolesList()"></addEdit>

        <el-dialog title="分配权限" :visible.sync="treeVisible" width="60%" @close="cc">
            <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
                :default-checked-keys="keys"  :props="defaultProps" :default-expand-all="true" ref="refTree">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="treeVisible = false">取 消</el-button>
                <el-button type="primary" @click="tj">确 定</el-button>
            </span>
        </el-dialog>




    </div>
</template>

<script>
import Breadcrumb from '@/views/Breadcrumb.vue'
import { getList, addList, editList, delRoles, getRight, closeDel,RolesTJ } from '@/utils/roles'
import addEdit from '@/views/addEdit.vue'
export default {
    components: { Breadcrumb, addEdit },
    data() {
        return {
            tableData: [],
            rolesFrom: {
                roleName: '',
                roleDesc: ''
            },
            rulesFrom: {
                roleName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ]
            },
            options: {
                title: '',
                dialogFormVisible: false,
                type: ''
            },
            n: 2,
            treeVisible: false,
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            data:[],
            keys:[],
            sum:0
        }
    },
    methods: {
        async getRolesList() {
            let { data: res } = await getList()
            this.tableData = res.data
        },
        add(valid) {
            this.options.dialogFormVisible = true
            this.options.type = 'add'
            this.options.title = '添加用户'

        },
        async editRoles(id) {
            this.options.dialogFormVisible = true
            this.options.type = 'edit'
            this.options.title = '编辑用户'
            let { data: res } = await editList(id)
            this.rolesFrom = res.data
        },
        delRoles(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let { data: res } = await delRoles(id)
                if (res.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getRolesList()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async getTableData() {
            let { data: res } = await getRight()
            this.tableData = res.data
        },
        async close(a, b) {
            let { data: res } = await closeDel(a, b)
            let index = this.tableData.findIndex(item => {
                return item.id == a
            })
            this.tableData[index].children = res.data
        },
        async getTree(){
            let {data:res} = await getRight()
            this.data = res.data
        },
        poRoles(id){
            this.num = id
            this.keys = []
            this.treeVisible = true
            let index = this.tableData.findIndex(item=>{
                return item.id == id
            })
            this.getDi(this.tableData[index].children)
        },
        getDi(arr){
            arr.forEach(item=>{
                if(item.children){
                    this.getDi(item.children)
                }else{
                    this.keys.push(item.id)
                }
            })
        },
        cc(){
            this.$refs.refTree.setCheckedKeys([])
        },
        async tj(){
            let a = this.$refs.refTree.getHalfCheckedKeys()
            let b = this.$refs.refTree.getCheckedKeys()
            let c = [...a,...b].join(',')
            let {data:res} = await RolesTJ(this.num,c)
            if(res.meta.status==200){
                this.$message.success(res.meta.msg)
                this.treeVisible = false
                this.getRolesList()
            }else{
                this.$message.error(res.meta.msg)
            }
          
        }
    },
    mounted() {
        this.getRolesList()
        this.getTree()
    }

}
</script>


<style lang="scss">
.tagBox {
    margin: 5px;
}

.oneRow {
    border-bottom: 1px solid #eee;
}

.oneRows:first-child {
    border-top: 1px solid #eee;
}

.twoRows:last-child {
    border-bottom: none;
}
</style>